import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import About from "./About";

const Home: React.FC = () => (
  <div style={{ fontFamily: "system-ui, sans-serif", padding: 12 }}>
    <h2>React 子应用</h2>
    <p>来自 @micro/sub-react 的内容。</p>
  </div>
);

console.log("vue window===", window);

function App() {
  return (
    <BrowserRouter basename={import.meta.env.BASE_URL}>
      <div style={{ fontFamily: "system-ui, sans-serif" }}>
        <nav
          style={{
            display: "flex",
            gap: 12,
            padding: 12,
            borderBottom: "1px solid #e2e8f0",
            marginBottom: 12,
          }}
        >
          <Link to="/">首页</Link>
          <Link to="/about">About</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
